import React, { Component } from 'react'
/**
 * 受控表单的操作步骤
 * 1、在构造函数中为state定义状态数据
 * 2、使用value={this.state.xx}将状态数据绑定到具体表单元素上
 * 3、为表单元素绑定onChange事件，调用相关事件绑定回调函数
 * 4、在事件绑定的回调函数中通过event.target.value获取表单元素中的内容，再将这个元素的内容通过setState方式设置到状态中
 */
export default class AddUserInfo extends Component {
  constructor(props){
    super(props)
    this.state={
        name:'',
        age:'',
        gender:1,
        hobby:[],
        birthday:''
    }
  }
  handleName=(e)=>{
    this.setState(()=>{
      return{
        name:e.target.value
      }
    })
  }
  handleAge=e=>this.setState({age:e.target.value})
  handleGender=e=>this.setState({gender:e.target.value})
  handleHobby=e=>{
    this.state.hobby.push(e.target.value)
    this.setState({
      hobby:this.state.hobby
    })
  }
  handleBirthday=e=>this.setState({birthday:e.target.value})
  register=()=>{
    this.props.users.push({
      title:'教师信息',
      name:this.state.name,
      age:this.state.age,
      gender:this.state.gender,
      hobby:this.state.hobby,
      birthday:new Date(this.state.birthday),
      likeNum:0
    })
    console.log('获取users',this.props.users);
    //调用父组件传递过来的回调函数
    this.props.callback(this.props.users)
   
  }
  render() {
    return (
      <div>
          <div>
              <label htmlFor="">姓名:</label>
              <input type="text" value={this.state.name} onChange={this.handleName}/>
          </div>
          <div>
              <label htmlFor="">年龄:</label>
              <input type="text" value={this.state.age} onChange={this.handleAge}/>
          </div>
          <div>
              <label htmlFor="">性别:</label>
              <input type="radio" name="sex" value={1} checked={this.state.gender==1?true:false} onChange={this.handleGender}/>男
              <input type="radio" name="sex" value={0} checked={this.state.gender==0?true:false} onChange={this.handleGender}/>女
          </div>
          <div>
              <label htmlFor="">爱好:</label>
              <input type="checkbox" value="读书" onChange={this.handleHobby}/>读书
              <input type="checkbox" value="打游戏" onChange={this.handleHobby}/>打游戏
              <input type="checkbox" value="唱歌" onChange={this.handleHobby}/>唱歌
              <input type="checkbox" value="跳舞" onChange={this.handleHobby}/>跳舞
          </div>
          <div>
              <label htmlFor="">生日:</label>
              <input type="date" value={this.state.birthday} onChange={this.handleBirthday}/>
          </div>
          <div>
             <button onClick={this.register}>注册</button>
          </div>
      </div>
    )
  }
}
